<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <div class="panel" style="min-height: 524px;">
                    <p class="item_title">竞标方案</p>
                    <div class="padding_16">
                        <el-row>
                            <el-col :span="3">
                                <div class="bg_blue left-info text-center">
                                    <p class="bid-status">已提交</p>
                                    <p class="bid-time">{{listData.pb_create_time}}</p>
                                </div>
                            </el-col>
                            <el-col :span="21">
                                <div class="base-info-box casedetail">
                                    <div class="base-info-row">
                                        <p class="base-info-label-cell">竞标报价：</p>
                                        <p class="base-info-data-cell">￥{{listData.pb_offer}} </p>
                                    </div>
                                    <div class="base-info-row">
                                        <p class="base-info-label-cell">预估工期：</p>
                                        <p class="base-info-data-cell">{{listData.pb_days}}天</p>
                                    </div>
                                    <div class="base-info-row">
                                        <p class="base-info-label-cell">竞标优势：</p>
                                        <p class="base-info-data-cell">{{listData.pb_days}}</p>
                                    </div>
                                    <div class="base-info-row">
                                        <p class="base-info-label-cell">附件：</p>
                                        <div class="base-info-data-cell">
                                            <div v-for="(item,index) in listData.pb_enclosure_name
" :key="index">
                                                <span style="display: inline-block;line-height: 30px;color: #2093ff;cursor: pointer;" @click="downloadFile(item.f_id,item.f_old_name,item.f_file_type)">{{item.f_old_name}}.{{item.f_file_type}}</span>   
                                            </div>
                                        </div>
                                    </div>
                                    <div class="base-info-row">
                                        <p class="base-info-label-cell">项目案例：</p>
                                        <div class="base-info-data-cell">
                                            <div v-for="(item,index) in listData.case" :key="index">
                                                <div class="base-info-box casedetail">
                                                    <div class="base-info-row">
                                                        <p class="base-info-label-cell"><span class="sign_num">{{index+1}}</span>项目名称：</p>
                                                        <p class="base-info-data-cell">{{item.cp_name}}</p>
                                                    </div>
                                                    <div class="base-info-row">
                                                        <p class="base-info-label-cell">担任角色：</p>
                                                        <p class="base-info-data-cell">{{item.role_name}}</p>
                                                    </div>
                                                    <div class="base-info-row">
                                                        <p class="base-info-label-cell">项目地址：</p>
                                                        <p class="base-info-data-cell">{{item.cp_look_address}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panel">
                    <div class="border_top_blue white_bg">
                        <p class="bidding_title bidding_title_41">竞标流程指引</p>
                        <ul class="bidding_list bidding_step_list clearfix">
                            <li v-for="(item,index) in stepData" :key="index">
                                <span class="zb-orderly-mark">{{item.num}}</span>{{item.txt}}
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>

    import axios from 'axios';
    export default {
        data(){
            return{
                stepData: [
                    {'num': 1, 'txt': '理解需求、提交竞标方案'},
                    {'num': 2, 'txt': '绑定手机关注中标通知提醒'},
                    {'num': 3, 'txt': '收到中标合同并确认'},
                    {'num': 4, 'txt': '按照实施阶段计划开展实施'},
                    {'num': 5, 'txt': '完成项目，双方互评'},
                ],
                listData: [],
            }
        },
        methods: {
            init(){
                var _this = this;

                this.$httpGet('/api/index/Workbench/caseList',{'pb_id': this.$route.query.pbid}).then(response => {

                    if(response.code == 200){

                        _this.listData = response.msg;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //下载附件
            downloadFile(fid,f_old_name,f_file_type){
                var _this = this;

                axios({
                    method: 'get',
                    url: '/api/index/Project/download',
                    params: {
                        'f_id': fid,
                    },
                    responseType: 'arraybuffer',

                })
                .then(function (response) {

                    _this.download(response.data,f_old_name,f_file_type);

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            // 下载文件
            download (data,f_old_name,f_file_type) {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', f_old_name +'.'+f_file_type);

                document.body.appendChild(link);
                link.click();
            },
        },
        mounted(){
            this.init();
        },
    }
</script>